<template>
  <div class="refCreate">
    <div class="person">
      <h2>姓名：{{ name }}</h2>
      <h2>年龄：{{ age }}</h2>
      <button @click="changeName">修改名字</button>
      <button @click="changeAge">年龄+1</button>
      <button @click="showTel">点我查看联系方式</button>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue"; //必须使用ref来绑定数据，实现数据双向绑定
export default {
  name: "refCreate",
  setup() {
    // 数据 原来写在data中，（注意：此时的name、age、tel数据都不是响应式数据）
    let name = ref("张三"); //数据使用ref绑定，在下边调用更改的时候使用.value
    let age = ref(18);
    let tel = ref("188888888");

    // 方法 原来写在methods中
    function changeName() {
      name.value = "zhang - san"; //使用.value来实现双向绑定
      console.log(name);
    }
    function changeAge() {
      age.value += 1; //使用.value来实现双向绑定
      console.log(age);
    }
    function showTel() {
      alert(tel);
    }

    // 返回一个对象，对象中的内容，模板中可以直接使用
    return { name, age, tel, changeName, changeAge, showTel };
  },
};
</script>
<style scoped>
.refCreate {
  width: 80vw;
  height: 80vh;
  border: 1px solid red;
}
</style>